<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box>div{
				width: 500px;
				height: 200px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="div1">div content</div>
			<em>em text</em>
			<button>click</button>
		</div>
		<script>
			const btn1 = document.getElementsByTagName("button")[0];
			//给按钮添加事件监听器
			btn1.addEventListener('click',function(){
				const newPara = document.createElement('p');
				const txtPara = document.createTextNode("this is a new Para");
				wrapper.appendChild(newPara);
				newPara.innerHTML = "new Para<br/>";
				newPara.appendChild(txtPara);
				const newImg = document.createElement('img');
				newImg.src = "img/大理1.jpg";
				const emElem = document.querySelector("em");
				wrapper.insertBefore(newImg,emElem);
				
				wrapper.removeChild(emElem);
			})
		</script>
	</body>
</html>